<template>
  <view
    class="radio"
    :class="[
      `radio--${getTextPosition}`,
      { 'radio--disabled': disabled, 'radio--inline': inline, 'radio--checked': checked },
    ]"
  >
    <m-icon
      :name="getIconName"
      :size="iconSize"
      :color="disabled || !checked ? '#d9d9d9' : '#248DFA'"
      class="i-checked"
      @click="handleClick('icon')"
    />
    <view class="radio__content" @click="handleClick('content')">
      <slot />
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, onUnmounted, reactive, toRefs, computed } from '@vue/composition-api'

export default defineComponent({
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    iconSize: {
      type: [String, Number],
      default: 40,
    },
    iconName: {
      type: String,
      default: 'check-normal',
    },
    iconActiveName: {
      type: String,
      default: 'check-checked',
    },
    label: {
      type: [String, Number],
      default: null,
    },
    contentDisabled: {
      type: Boolean,
      default: null,
    },
  },
  emits: ['input', 'change'],
  options: {
    virtualHost: true, //  将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等，而是希望自定义组件内部的第一层节点能够响应 flex 布局或者样式由自定义组件本身完全决定
  },
  setup(props, { emit }) {
    const radioParent: any = inject('radioParent', null)
    const state = reactive({
      checked: false,
      inline: radioParent.inline,
    })
    const setCheck = (label, value) => {
      state.checked = label === value
    }
    const getTextPosition = computed(() => radioParent.textPosition)
    let label
    const handleClick = (position) => {
      if (props.disabled) {
        return
      }

      emit('click', label)
      if (position === 'content') {
        if (getContentDisabled.value) {
          return
        }
      }

      if (radioParent && radioParent.radioClick) {
        radioParent.radioClick(label)
      }
      emit('change', {
        value: state.checked,
        label,
      })
      emit('input', state.checked)
    }
    const getIconName = computed(() => {
      if (state.checked) {
        return props.iconActiveName
      }
      if (props.disabled) {
        return 'check-disabled'
      }

      return props.iconName
    })
    const getContentDisabled = computed(() => {
      if (props.contentDisabled != null) {
        return props.contentDisabled
      }

      if (radioParent && radioParent.contentDisabled != null) {
        return radioParent.contentDisabled
      }

      return false
    })

    onMounted(async () => {
      if (radioParent && radioParent.addRadio) {
        label = props.label !== null ? props.label : radioParent.radioList.length

        radioParent.addRadio({
          label,
          disabled: props.disabled,
          vm: {
            setCheck,
          },
        })
      }
    })

    onUnmounted(async () => {
      if (radioParent && radioParent.removeRadio) {
        radioParent.removeRadio(label)
      }
    })

    return {
      ...toRefs(state),
      setCheck,
      handleClick,
      getTextPosition,
      getIconName,
      getContentDisabled,
    }
  },
})
</script>
<style lang="scss" scoped>
.radio {
  display: flex;
  align-items: center;
  // margin-bottom: 24rpx;
  &__content {
    // flex: 1;
    // min-width: 0;
    color: $--font-primary-c;
  }
  &--checked {
    .radio__content {
      color: #248dfa;
    }
  }
  .i-checked {
    margin-right: 12rpx;
    width: 40rpx;
  }
  &--left {
    flex-direction: row-reverse;
    .i-checked {
      margin-left: 24rpx;
    }
  }
  &--disabled {
    .radio__content {
      color: $--font-secondary-c;
    }
  }
  &--inline {
    margin-right: 56rpx;
  }
}
</style>
